<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>博客 - 专业拷贝 - 专业分享资源 - 拷贝我们是专业的</title>
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<!-- 新 Bootstrap4 核心 CSS 文件 -->
		<link rel="stylesheet" href="./css/bootstrap.min.css">
		<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
		<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
		<!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
		<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
		<!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
		<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
		<!-- 子然于梦，必然精彩。 -->
		<link rel="stylesheet" type="text/css" href="./css/home.css" />
		<style type="text/css">
			/* 设置全局样式 */
			html,
			body,
			div,
			span,
			h1,
			h2,
			h3,
			h4,
			h5,
			h6,
			a,
			em,
			img,
			dd,
			p,
			dl,
			dt,
			ul,
			li,
			ol,
			form,
			label,
			table,
			tr,
			td,
			input {
				margin: 0;
				padding: 0;
				color: #ffffff;
			}

			/* a标签 隐藏下划线 */
			a {
				text-decoration: none;
				color: #707070;
			}
		</style>
	</head>
	<body style="background-color: rgb(241,240,246);">
		<!-- 发布文章页面 -->
		<div class="hai-fb-k">
			<div class="hai-fb-gn" align="center">
				<div class="fb-gn-left">
					<img src="./wz/fb.png" style="width: 25px;height: 25px;" />
					<span style="color:#ffffff;font-size:10px;font-family: " Times New Roman", Times, serif;">发动态</span>
				</div>
				<div class="fb-gn-right">
					<img src="./wz/tw.png" style="width: 25px;height: 25px;" />
					<span style="color:#ffffff;font-size:10px;font-family: " Times New Roman", Times, serif;">写图文</span>
				</div>
			</div>
			<div class="hai-fb-im">
				<img src="./img/X.png" style="width: 25px;height: 25px;position: absolute;right: 10px;bottom: 5px;"
					id="gb-fb" />
			</div>
		</div>
		<div class="hai-head">
			<div class="hai-head-left">

			</div>
			<div class="hai-head-center">
				BLog-博客
			</div>
			<div class="hai-head-right">
				<img src="./img/Ss.png" style="width: 25px;height: 25px;">
			</div>
		</div>
		<div class="hai-bt">
			<div class="tab">
				<ul>
					<li onclick="show(0)" id="qb">全部</li>
					<li onclick="show(1)">动态</li>
					<li onclick="show(2)">文本</li>
					<li onclick="show(3)">视频</li>
				</ul>
				<span class="curline" id="bn2"></span>
			</div>
		</div>
		<div class="hai-lbt">
			<!-- 轮播栏 -->
			<div style="width: 100%;height: 100%;padding-left:5px;padding-right: 5px;padding-top: 5px;">
				<div id="demo" class="carousel slide" data-ride="carousel" style="height: 100%;">
					<!-- 指示符 -->
					<ul class="carousel-indicators">
						<li data-target="#demo" data-slide-to="0" class="active"></li>
						<li data-target="#demo" data-slide-to="1"></li>
						<li data-target="#demo" data-slide-to="2"></li>
						<li data-target="#demo" data-slide-to="3"></li>
					</ul>
					<!-- 轮播图片 -->
					<div class="carousel-inner">
						<div class="carousel-item active">
							<img src="https://blog.cclown.com/zb_users/upload/2021/05/202105291622295060108294.jpg"
								class="card">
							<div class="carousel-caption">
								<p>描述文字!</p>
							</div>
						</div>
						<div class="carousel-item">
							<img src="https://blog.cclown.com/zb_users/upload/2021/05/202105291622295082462677.jpg"
								class="card">
							<div class="carousel-caption">
								<p>描述文字!</p>
							</div>
						</div>
						<div class="carousel-item">
							<img src="https://blog.cclown.com/zb_users/upload/2021/05/202105291622295072336735.jpg"
								class="card">
							<div class="carousel-caption">
								<p>描述文字!</p>
							</div>
						</div>
						<div class="carousel-item">
							<img src="https://blog.cclown.com/zb_users/upload/2021/05/202105291622295045502186.jpg"
								class="card">
							<div class="carousel-caption">
								<p>描述文字!</p>
							</div>
						</div>
					</div>
					<!-- 左右切换按钮 -->
					<a class="carousel-control-prev" href="#demo" data-slide="prev">
						<span class="carousel-control-prev-icon"></span>
					</a> <a class="carousel-control-next" href="#demo" data-slide="next">
						<span class="carousel-control-next-icon"></span>
					</a>
				</div>

			</div>
		</div>
		<!-- 博客列表 -->
		<div class="hai-list-data">
			<ul class="hai-ul">
				<li style="width: 100%;height: 100%;margin-bottom: 60px;">
					<div class="list-data">
						<div class="list-data-top">
							<div class="data-top-left">
								<img src="./img/Tx.jpg" style="width: 40px;height: 40px;border-radius: 50%;">
							</div>
							<div class="data-top-context">
								<div class="top-context-top">
									<span
										style="color: #ff0000;font-size: 15px;font-weight: 500;display:block;">背包客</span>
									<span style="color: #b5b5b5;font-size: 10px;display:block;">05-29 21:34 手机端
										公开内容</span>
								</div>
							</div>
						</div>
						<div class="list-data-context">
							博客，仅音译，英文名为Blogger，为Web
							Log的混成词。它的正式名称为网络日记；又音译为部落格或部落阁等，是使用特定的软件，在网络上出版、发表和张贴个人文章的人，或者是一种通常由个人管理、不定期张贴新的文章的网站。博客上的文章通常以网页形式出现，并根据张贴时间，以倒序排列。通常具备RSS订阅功能。博客是继MSN、BBS、ICQ之后出现的第4种网络交流方式，现已受到大家的欢迎，是网络时代的个人“读者文摘”，是以超级链接为入口的网络日记，它代表着新的生活、工作和学习方式。许多博客专注在特定的课题上提供评论或新闻，其他则被作为个人性的日记。一个典型的博客结合了文字、图像、其他博客或网站的链接及其它与主题相关的媒体，能够让读者以互动的方式留下意见，是许多博客的重要要素。大部分的博客内容以文字为主，但仍有一些博客专注在艺术、摄影、视频、音乐、播客等各种主题。博客是社会媒体网络的一部分。比较著名的有新浪等博客。
						</div>
						<div class="list-data-but">
							<div class="dat-but-left">
								<img src="./img/Gps.png" style="width: 15px;height: 15px;">
								<span style="color: #b5b5b5;font-size: 12px;">湖南</span>
							</div>
							<div class="dat-but-right">
								<span style="color: #b5b5b5;font-size: 12px;"># 博客的由来</span>
							</div>
						</div>
						<div class="list-data-zl">
							<div class="list-data-zl-s">
								<img src="./tz/dz.png" style="width:18px;height: 18px;margin-bottom: 0px;">
								<span class="zl-s-txt">143</span>
							</div>
							<div class="list-data-zl-s">
								<img src="./tz/pl.png" style="width:18px;height: 18px;margin-bottom: 0px;">
								<span class="zl-s-txt">432</span>
							</div>

							<div class="list-data-zl-s">
								<img src="./tz/ydl.png" style="width:18px;height: 18px;margin-bottom: 0px;">
								<span class="zl-s-txt">1289</span>
							</div>


						</div>
						<div class="list-data-pl">
							<div class="list-pl">
								<div class="list-pl-left">
									王富贵 ：
								</div>
								<div class="list-pl-right">
									真tm良心
								</div>
							</div>
							<div class="list-pl">
								<div class="list-pl-left">
									张麻子 ：
								</div>
								<div class="list-pl-right">
									这是博客？这tm是博客？
								</div>
							</div>
							<div class="list-pl">
								<div class="list-pl-left">
									汤师爷 ：
								</div>
								<div class="list-pl-right">
									这是博客，真是博客。
								</div>
							</div>
						</div>
					</div>
				</li>
			</ul>
		</div>
		<!-- 底部导航 -->
		<div class="hai-dh">
			<div class="hai-dh-context">
				<img src="dh/sy.png" class="db-im" />
				<span class="dh-txt" id="dh-a">首页</span>
			</div>
			<div class="hai-dh-context">
				<img src="dh/fx2.png" class="db-im" />
				<span class="dh-txt" id="dh-b">发现</span>
			</div>
			<div class="hai-dh-context">
				<img src="dh/xx2.png" class="db-im" />
				<span class="dh-txt" id="dh-c">通知</span>
			</div>
			<div class="hai-dh-context">
				<img src="dh/wd2.png" class="db-im" />
				<span class="dh-txt" id="dh-d">我的</span>
			</div>
			<div style="position: absolute;width: 100%;height: 100%;bottom: 15px;">
				<img src="dh/x.png" style="width: 35px;height: 35px;" id="tc-bu" />
			</div>

		</div>
		<!-- 发布动态 -->
		<div class="fb-dt">
			<div class="fb-dt-t">
				<img src="./dynamic/fh.png" style="width: 25px;height: 25px;margin-right: 5px;" id="qxdt" >
				发布动态
			</div>
			<div class="fb-dt-body">
				<textarea class="pl-tc-context" rows="8">留下你的足迹。。。</textarea>
				<button type="button" class="btn btn-success" style="position: absolute;right: 20px;width: 80px;height: 35px;font-size: 13px;margin-top: 20px;">发&nbsp;布</button>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		$('#dh-a').css("color", "#000000");
		$('#dh-b').css("color", "#b5b5b5");
		$('#dh-c').css("color", "#b5b5b5");
		$('#dh-d').css("color", "#b5b5b5");
		$('.fb-dt').show();
		
		$('#qxdt').click(function() {
			$('.fb-dt').animate({
				top: "-800px",
			}, function() {
			});
		});
		
		$('#tc-bu').click(function() {
			$('.hai-fb-k').animate({
				top: "0px"
			}, function() {
		
			});
		});
		
		$('.fb-gn-left').click(function() {
			$('.fb-dt').animate({
				top: "0px"
			}, function() {

			});
		});

		$('#gb-fb').click(function() {
			$('.hai-fb-k').animate({
				top: "-25vh"
			}, function() {

			});
		})

		function show(value) {
			if (value == 0) {
				$('#bn2').animate({
					left: "0px"
				}, function() {

				});
			} else if (value == 1) {
				$('#bn2').animate({
					left: "70px"
				}, function() {

				});
			} else if (value == 2) {
				$('#bn2').animate({
					left: "140px"
				}, function() {

				});
			} else if (value == 3) {
				$('#bn2').animate({
					left: "210px"
				}, function() {

				});
			}

		}
	</script>
</html>
